<template>
	<view class="detail">
		<view class="top">
			<text class="top-l">订单状态</text>
			<text class="top-r" v-if="order.orderStatus == 0">待支付</text>
			<text class="top-r" v-if="order.orderStatus == 1">待发货</text>
			<text class="top-r" v-if="order.orderStatus == 2">已发货</text>
			<text class="top-r" v-if="order.orderStatus == 3">已完成</text>
			<text class="top-r" v-if="order.orderStatus == 8">待评价</text>
		</view>
		<view class="address">
			<view class="address-l">
				<view class="ad1">收货地址</view>
				<view class="ad2">{{order.province}}{{order.city}}{{order.area}}{{order.province}}</view>
			</view>
			<view class="address-r">
				<view class="ad1">{{order.contactMan}}</view>
				<view class="ad2">{{order.contactPhone}}</view>
				<view><button type="default" class="btn" @click="toLogistics">查看物流</button></view>
			</view>
		</view>
		
		<view class="cont" v-for="(item,i) in unshipped" :key="i">
			<view class="cont-l">
				<image :src="item.pictureUrl" mode="" class="img"></image>
			</view>
			<view class="cont-c">
				<view class="name">{{item.commodityName}}</view>
				<view class="spec">{{item.optionName}}</view>
				<view class="price">
					<text class="price-l">¥{{item.marketingPrice}}</text>
					<text class="price-r">X{{item.buyAmount}}</text>
				</view>
			</view>
		</view>
		
		<view class="block1">
			<view class="block1-item">
				<text class="block1-l">商品总价</text>
				<text class="block1-r">¥{{order.orderMoney}}</text>
			</view>
			<view class="block1-item">
				<text class="block1-l">会员折扣价</text>
				<text class="block1-r">¥</text>
			</view>
			<view class="block1-item">
				<text class="block1-l">运费</text>
				<text class="block1-r">¥90.0</text>
			</view>
			<view class="block1-item">
				<text class="block1-l">优惠券抵扣</text>
				<text class="block1-r">¥90.0</text>
			</view>
			<view class="block1-item">
				<text class="block1-l">实付款</text>
				<text class="block1-r theme-color">¥{{order.payAmount}}</text>
			</view>
		</view>
		
		<view class="block1">
			<view class="block1-item">
				<text class="block1-l">订单号</text>
				<text class="block1-r">{{order.orderId}}</text>
			</view>
			<view class="block1-item">
				<text class="block1-l">下单时间</text>
				<text class="block1-r">{{order.createdTime}}</text>
			</view>
		</view>
		
		<view class="bottom">
			<view class="bottom-l">
				还剩6天19小时自动确认
			</view>
			<view class="bottom-r">
				确认收货
			</view>
		</view>
	</view>
</template>

<script>
	import Api from '../../../util/api.js'
	import { formatDateTime } from '../../../util/util.js'
	export default {
		data() {
			return {
				order:'',
				unshipped:[]
			};
		},
		onLoad(option) {
			this.getOrderDetail(option.orderId)
		},
		methods: {
			getOrderDetail(orderId){
				Api.fetchPost('/fsbus/M2004',{orderId: orderId}).then(res=>{
					if(res.errorNo == 0){
						this.order = res.results.order;
						this.unshipped = res.results.unshipped;
						this.order.createdTime = formatDateTime(this.order.createdTime)
					}
				}).catch(err=>{})
			},
			toLogistics(){
				uni.navigateTo({
						url: '/pages/order/logistics/logistics'
				});
			},
		}
	}
</script>

<style>
.detail {
	width: 100%;
	min-height: 100%;
	position: absolute;
	background-color: #f3f3f3;
	font-size: 26upx;
	padding-bottom: 128upx;
}
.top {
	height: 80upx;
	line-height: 80upx;
	background-color: #fff;
	padding: 0 30upx;
}
.top .top-l {
	float: left;
}
.top .top-r {
	float: right;
	color: #F52A4C;
}
.address {
	margin-top: 20upx;
	background-color: #fff;
	padding: 20upx 30upx;
	display: flex;
}
.address .address-l {
	width: 55%;
	margin-right: 20upx;
}
.address .address-r {
	text-align: right;
	flex: 1;
}
.address .address-l ,.address .address-r {
	overflow: hidden;
}
.address .ad1 {
	color: #333;
	height: 60upx;
}
.address .ad2 {
	color: #999999;
}
.address .btn {
	width: 100%;
	height: 60upx;
	background-color: #fff;
	color: #333;
	line-height: 54upx;
	font-size: 26upx;
	margin-top: 30upx;
	border: 1px solid #ccc;
}
uni-button:after {
	border: none;
}

.cont {
	display: flex;
	background-color: #fff;
	margin-top: 20upx;
	padding: 20upx 30upx;
}
.cont .cont-l {
	width: 150upx;
	height: 150upx;
	margin-right: 40upx;
}
.cont .cont-l .img {
	width: 100%;
	height: 100%;
	background-color: #A2A2A2;
}
.cont .cont-c {
	flex: 1;
}
.cont .name {
	font-size: 24upx;
	height: 50upx;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.cont .spec {
	color: #666666;
	font-size: 22upx;
	margin-bottom: 10upx;
}
.cont .price-l {
	float: left;
	color: #2E2E2E;
}
.cont .price-r {
	float: right;
	font-size: 22upx;
	color: #999999;
}
.block1 {
	background-color: #fff;
	margin-top: 20upx;
	padding: 0 30upx;
	line-height: 80upx;
}
.block1-item {
	height: 80upx;
	overflow: hidden;
}
.block1-l {
	float: left;
	font-size: 24upx;
}
.block1-r {
	float: right;
	color: #999;
	font-size: 30upx;
}
.theme-color {
	color: #F52A4C ;
}
.bottom {
	width: 100%;
	height: 118upx;
	background-color: #fff;
	position: fixed;
	bottom: 0;
	left: 0;
	box-shadow: 0px 0px 5px #ccc;
	display: flex;
	line-height: 118upx;
}
.bottom .bottom-l {
	flex: 1;
	padding-left: 30upx;
}
.bottom .bottom-r {
	width: 300upx;
	height: 118upx;
	background-color: #F52A4C;
	color: #fff;
	font-size: 30upx;
	text-align: center;
}
</style>
